<template>
<div>
<mt-header title="nuxt_text">
  <mt-button icon="back" slot="left" @click="exit()">退出</mt-button>
  <mt-button icon="more" slot="right"></mt-button>
</mt-header>
<div class="article"><nuxt keep-alive class="main"/></div>
<mt-tabbar v-model="page_path" >
  <mt-tab-item v-for="(item,idx) in tabber_list" :key="idx" :id="item.path_name" >
    <i class="iconfont" :class="item.img" slot="icon"  style="font-size: 26px;"></i>
    {{item.text}}
  </mt-tab-item>
</mt-tabbar>
</div>
</template>


<style>
body{
  margin: 0px;
}
.article{
  text-align: center;
  position: absolute;
  width: 100%;
  top: 40px;
  bottom: 55px;
  overflow-y:auto;
  display: flex;
  flex-flow: column nowrap;
}
</style>

<script>
export default {
  data(){
    return  { 
      page_path: '/',
      tabber_list:[
        {text:'首页',path_name:'/',img:'icon-dianpu'},
        {text:'表单',path_name:'/module/page2',img:'icon-dingdan'},
        {text:'富文本',path_name:'/module/h5editor',img:'icon-gonglve'},
        {text:'列表',path_name:'/module/page3',img:'icon-wode'}
      ]
    }
  },
  methods:{
    goback:function(){
      history.go(-1)
    },
    exit:function(){
       alert('exit!')
    }
  },
  watch:{
      page_path: function (val, oldVal) {
        // 这里就可以通过 val 的值变更来确定
        this.$router.push({
          path: val
        })
      }
  }
}
</script>
